<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
       
     
        <a-menu-item key="1">
          <router-link to="/Home">
            <a-icon type="pie-chart" />
            <span>首页</span>
          </router-link>
        </a-menu-item>

        <a-menu-item key="8">
          <router-link to="/UserCheckList">
            <a-icon type="file-text" />
            <span>出入门记录</span>
          </router-link>
        </a-menu-item>
        

   


        <a-sub-menu key="sub2">
        <span slot="title"><a-icon type="line-chart" /><span>统计分析</span></span>
        <a-menu-item key="2">
          <router-link to="/LineChart">
            <span>出入统计</span>
            
          </router-link>
        </a-menu-item>
        <a-menu-item key="3">
         <router-link to="/PineChart">
            <span>健康统计</span>
          </router-link>
        </a-menu-item>
     
      </a-sub-menu>

   <a-sub-menu key="sub1">
        <span slot="title"><a-icon type="team" /><span>用户管理</span></span>
        <a-menu-item key="4">
          <router-link to="/VisitorList">
            <span>游客</span>
            <!-- 认证未通过的 -->
          </router-link>
        </a-menu-item>
        <a-menu-item key="5">
         <router-link to="/HostList">
            <span>普通用户</span>
          </router-link>
        </a-menu-item>
     
      </a-sub-menu>

        <a-menu-item key="6">
          <router-link to="/StaffList">
            <a-icon type="contacts" />
            <span>检查人员管理</span>
          </router-link>
        </a-menu-item>
   
        <a-menu-item key="7" @click="logout">
          <router-link to="/">
            <a-icon type="logout" />
            <span>退出系统</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: rgba(235, 235, 238, 0.658); padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
        <span><img src="../../static/favicon.png"
        style="
          position: relative;
          top: -6px;
          left: 340px;
          height: 50px;
          width: auto;
          border-radius: 70%;"
        /></span>
        <span class="title">智慧社区管理系统</span>
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: 'rgba(235, 235, 238, 0.658)',
          minHeight: '87vh'
        }"
      >
      
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false
    };
  },
  methods: {
    logout() {
      console.log("s");
      localStorage.removeItem("ktoken");
    }
  }
};
</script>

<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);

  margin: 16px;
}
.title {
  display:-moz-inline-box; display:inline-block;
  margin-left: 355px;
  font-family: Courier;
  font-size: 27px;
  color: rgba(44, 114, 73, 0.808);
}

</style>
